<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轮播图页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">

</head>
<body>
<%--添加--%>
<form class="layui-form layui-form-pane" id="addForm" lay-filter="updateFilter" style="display: none;padding: 10px 00px 0px 0px" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <!--隐藏-->
            <input type="hidden" name="bannerUrl" />
            <input type="hidden" id="sid" name="bannerId" />
            <label class="layui-form-label">轮播图名称</label>
            <div class="layui-input-block">
                <input type="text" name="bannerOldName" lay-verify="required" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">封面上传</label>
            <button type="button" class="layui-btn" id="upload1">
                <i class="layui-icon">&#xe67c;</i>点击上传
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传时间</label>
            <div class="layui-input-block">
                <input type="datetime" name="bannerDate" lay-verify="datetime" placeholder="请输入" id="date1"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展示</label>
            <div class="layui-input-block">
                <input type="radio" name="bannerState" value="2" title="展示">
                <input type="radio" name="bannerState" value="0" title="隐藏" checked>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="bannerDescription"lay-verify="required" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="add">添加</button>
        </div>
    </div>
</form>
    <div class="layui-form-item">

        <!--条件查询----------->
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" required lay-verify="required" id="name" class="layui-input">
            </div>
            <button type="button" id="btn1" class="layui-btn  ">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </div>
    </div>
<div class="layui-inline">
    <div class="layui-input-block">
        <button id="addBanner" class="layui-btn"  lay-filter="addBanner">添加轮播图</button>
    </div>
</div>
<table id="demo" lay-filter="list"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs"
           style="background-color: #d9534f;" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除</a>
    </script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button id="deleteIds" class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>

    </div>
</script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script>
        layui.use(['form', 'table','upload','laydate'], function () {
            var $ = layui.$;
            var form = layui.form;
            var table = layui.table;
            var upload = layui.upload;
            var laydate = layui.laydate;
            laydate.render({
                elem:"#date1"

            })
            laydate.render({
                elem:"#date2"
            })
            table.render({
                elem:"#demo"//指定到一个html元素，写的是选择器
                ,url:"${pageContext.request.contextPath}/banner/selectAll"//发送请求的后台地址
                ,toolbar:"#toolbarDemo"
                ,cols:[[
                    {type:"checkbox",width:80}
                    ,{field:"bannerId",title:"编号",width:60}
                    ,{field:"bannerUrl",title:"图片",width:100,templet:function (d) {
                            return '<img height=\'50px\',width=\'50px\'  src=${pageContext.request.contextPath}/'+d.bannerUrl+' >'
                        }}
                    ,{field:"bannerOldName",title:"图片名字",width:150}
                    ,{field:"bannerState",title:"图片状态",edit:"text",templet:function (d) {
                                    if (d.bannerState==2){
                                        return "展示";
                                    }else if (d.bannerState==0) {
                                        return "隐藏";
                                    }
                        },width:100}
                    ,{field:"bannerDate",title:"上传时间",width:200}
                    ,{field:"bannerDescription",title:"描述",width:180}
                    ,{title:"操作", toolbar: '#barDemo', width: 180}
                ]]
                , page: true //开启分页
                ,limit:3
                ,limits:[3,6,9]
            });
            // --------------条件查询 开始-------------

            // --------------条件查询 结束-------------

            // 添加 上传文件  开始-------------
            upload.render({
                elem:"#upload1",
                url:'${pageContext.request.contextPath}/banner/upload',
                done:function (res){

                    form.val('updateFilter',{
                        bannerUrl:res.newName
                    })
                    layer.msg("图片上传成功");
                }
            })
            // 添加 上传文件  结束-------------
            //添加  开始 -----------------
            $("#addBanner").click(function () {
                layer.open({
                    type:1,
                    title:'添加',
                    area:'800px',
                    content:$("#addForm"),
                    maxmin:true
                })
            })
            form.on('submit(add)',function () {
                if ($("#sid").val()==""){
                    $.ajax({
                        url:'${pageContext.request.contextPath}/banner/addBanner',
                        data:$("#addForm").serialize(),
                        success:function (result) {
                            if(result.flag){
                                layer.closeAll();           //关闭弹出框
                                $("#addForm")[0].reset();   //重置表单数据
                                table.reload('demo');       //表格重载
                                layer.msg("添加成功");       //提示消息
                            }else {
                                layer.msg('添加异常')
                            }
                        }
                    })
                }else {
                    $.ajax({
                        url:'${pageContext.request.contextPath}/banner/updateBanner',
                        data:$("#addForm").serialize(),
                        success:function (result) {
                            if(result.flag){
                                layer.closeAll();           //关闭弹出框
                                $("#addForm")[0].reset();//重置表单数据
                                table.reload('demo');       //表格重载
                                layer.msg("修改成功");       //提示消息
                            }else {
                                layer.msg('修改失败')
                            }
                        }
                    })
                }
                return false;
            })
            $("#addbtn").click(function () {
                layer.open({
                    type: 1,
                    area:'550px',//定义宽高
                    title:'添加',
                    content:$("#addForm")
                });
            })
            //添加结束--------------

            //查询开始--------------
            $("#btn1").click(function () {
                table.reload('demo', {
                    where: {
                        name: $("#name").val()
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            })
            //查询结束--------------

            // 批量删除开始-------------------
            // $("#del").click(function () {
            //     var a=[];
            //     table.on('toolbar(list)', function(obj){
            //         var checkStatus = table.checkStatus(obj.config.id);
            //
            //         var data = checkStatus.data;
            //         $(data).each(function (i,o) {
            //             a[i]=o.id;
            //         })
            //         $.ajax({
            //             url:'/Layui/student/delete',
            //             data:"ids="+a,
            //             success:function (result) {
            //                 if(result.flag){
            //                     table.reload('demo');       //表格重载
            //                     layer.msg("删除成功");       //提示消息
            //                 }
            //             }
            //         })
            //     });
            //
            // })
            // 批量删除结束-------------------

            //删除/修改开始--------------

            table.on('tool(list)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'del'){ //查看
                    layer.confirm('确认删除吗，亲', function(index){
                        //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:'${pageContext.request.contextPath}/banner/falseDeletes',
                            data:"id="+data.bannerId,
                            success:function (result) {
                                if(result.flag){
                                    table.reload('demo');       //表格重载
                                    layer.msg("删除成功");       //提示消息
                                }
                            }
                        })
                    });
                } else { //编辑
                    layer.open({
                        type: 1,
                        area:'550px',//定义宽高
                        title:'修改',
                        content:$("#addForm")
                    })
                    $.ajax({
                        url:'${pageContext.request.contextPath}/banner/selectOne',
                        data:"id="+data.bannerId,
                        success:function (result) {
                            form.val("updateFilter",result);
                        }
                    })
                }
            });
        });

    </script>
</body>
</html>















